<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh_CN">
<head>
    <meta charset="UTF-8"/>
    <title>书籍详情</title>
    <style>
        .search {
            margin-top: 10px;
            margin-left: 50px;
            width: 400px !important;
            float: left;
            display: inline-block !important;
        }
        .list{
            margin-left: 50px !important;
            font-size: 17px;
        }
        .icon {
            cursor: pointer;
            margin-left: 5px;
            margin-top: 10px;
            display: inline-block !important;
            float: left;
        }

        img {
            margin-left: 70px;
            width: 250px;
            height: 375px;
            float: left;
            display: inline-block;
        }

        .number-value {
            text-align: center;
            width: 30px;
            height: 30px;
        }

        .container {
            /*border: solid black 1px;*/
            margin-top: 40px;
        }

        .book-number {
            margin-left: 40px;
            margin-top: 5px;
            width: 200px;
            margin-bottom: 20px;
        }

        .book-sale {
            margin-left: 70px;
            margin-top: 10px;
            float: left;
            height: 120px;
            width: 200px;
        }

        .book-info {
            margin-top: 10px;
            margin-left: 60px;
            margin-right: 300px;
            float: left;
            height: 250px;
            width: 400px;
            overflow: hidden;
        }

        .detail {
            margin-top: 7px;
            font-size: 14px;
        }

        .author {
            margin-top: 5px;
            font-size: 13px;
        }

        .price {
            margin-top: 5px;
            color: #ff2832;
            font-size: 18px;
        }

        .title {
            margin-top: 5px;
            font-size: 18px;
            color: #2e6da4;
        }

        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
            -webkit-appearance: none !important;
            margin: 0;
        }

        input[type="number"] {
            -moz-appearance: textfield;
        }

        .btn {
            display: inline-block;
        }
        .form{
            float: left;
        }
    </style>
</head>
<body>
<link rel="stylesheet" th:href="@{/css/bootstrap-3.3.7.css}">
<script th:src="@{/script/jquery-2.1.1.js}"></script>
<script th:src="@{/script/bootstrap-3.3.7.js}"></script>
<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" th:href="@{/user/main}">基于springboot+mybatis+springsecuity+jwt的图书交易系统</a>
            <svg t="1670769465107" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2534" width="30" height="30"><path d="M896 128v832H224a96 96 0 1 1 0-192H832V0H192C121.6 0 64 57.6 64 128v768c0 70.4 57.6 128 128 128h768V128h-64z" fill="" p-id="2535"></path><path d="M224.064 832H224a32 32 0 0 0 0 64H831.936v-64H224.064z" fill="" p-id="2536"></path></svg>
        </div>
        <div>
            <ul class="nav navbar-nav">
                <form th:action="@{/user/select}" method="post" class="form">
                    <input type="text" placeholder="请输入图书名" class="form-control search"
                           name="bookName" id="bookName"/>
                    <svg  onclick="$('form').submit()" class="icon" t="1670244573250" viewBox="0 0 1024 1024" version="1.1"
                          xmlns="http://www.w3.org/2000/svg"
                          p-id="918" width="30" height="30">
                        <path d="M909.632 854.528l-259.712-259.712c40.32-52.096 62.08-115.84 62.08-182.848a298.24 298.24 0 0 0-87.872-212.096A297.792 297.792 0 0 0 411.968 112a298.24 298.24 0 0 0-212.096 87.872A297.6 297.6 0 0 0 112 411.968c0 80.128 31.36 155.52 87.872 212.16a297.6 297.6 0 0 0 212.096 87.872 297.6 297.6 0 0 0 182.72-62.016l259.712 259.584c3.2 3.2 8.384 3.2 11.584 0l43.584-43.52a8.192 8.192 0 0 0 0-11.52z m-339.2-284.16a222.784 222.784 0 0 1-158.464 65.6 222.784 222.784 0 0 1-158.4-65.536 222.784 222.784 0 0 1-65.6-158.464c0-59.776 23.36-116.096 65.664-158.4a222.784 222.784 0 0 1 158.336-65.6c59.84 0 116.16 23.232 158.4 65.664a222.784 222.784 0 0 1 65.6 158.336c0 59.84-23.296 116.16-65.536 158.4z"
                              p-id="919" fill="#707070">
                        </path>
                    </svg>
                </form>
                <li class="list"><a th:href="@{/user/cart}">我的订单</a></li>
                <li class="list"><a th:href="@{/user/cart}">购物车</a></li>
                <li class="list"><a th:href="@{/logout}">退出系统</a></li>
                <li class="list"><a th:href="@{/logout}">admin@localhost</a></li>
            </ul>
        </div>
    </div>
</nav>
<div class="container">
    <img th:src="'http://'+${bookEntity.bookUrl}" alt="着魔">
    <div class="book-info">
        <div class="title" th:text="${bookEntity.bookName}">着魔</div>
        <div class="author" th:text="${bookEntity.bookAuthor}">赫尔曼·布洛赫</div>
        <div class="price" th:text="'¥'+${bookEntity.bookPrice}">¥78.00</div>
        <div class="detail" th:text="${bookEntity.bookDetail}">
            《着魔》是曾获诺贝尔文学奖提名、被誉为“中欧最伟大的四位小说家”之一的奥地利作家赫尔曼·布洛赫的长篇小说代表作。故事发生在“一战”后十年，讲述了一个流浪汉来到一个小山村后，用他致命的、有害的思想污染了整个村庄，导致全体村民陷入着魔状态，继而引发了一系列邪恶事件……
        </div>
    </div>
    <div class="book-sale">
        <div class="book-number">
            <input class="btn btn-primary btn-sm" type="button" value="-"
                   onclick="reduce(this)"/>
            <input class="number-value" id="number-value" type="number" value="1"/>

            <input class="btn btn-primary btn-sm" type="button" value="+"
                   onclick="add(this)"/>
        </div>
        <button type="button" class="btn btn-primary buy" th:data-id="${bookEntity.bookId}" onclick="bybook(this)">购买书籍</button>
        <button type="button" class="btn btn-primary cart"th:data-id="${bookEntity.bookId}" onclick="addcart(this)">加入购物车</button>
    </div>
</div>
<script>
    function addcart(object){
        let num=document.getElementById("number-value").value
        fetch('http://localhost:8080/user/cart/'+$(object).data("id")+"/"+num,{
            headers: {
                'content-type': "application/x-www-form-urlencoded"
            },
            method: "GET"
        })
        alert("添加到购物车成功")
    }
    function bybook(object){
        let num=document.getElementById("number-value").value
        fetch('http://localhost:8080/user/buyOrder/'+$(object).data("id")+"/"+num,{
            headers: {
                'content-type': "application/x-www-form-urlencoded"
            },
            method: "GET"
        }).then(()=>{
            window.location.href='http://localhost:8080/user/order'
        })
    }
    function reduce(obj) {
        let num = $(obj).next();
        if (num.val() === '') {
            num.val(1);
        }
        if (parseInt(num.val()) > 1) {
            num.val(parseInt(num.val()) - 1);
        }

    }

    function add(obj) {
        let num = $(obj).prev();
        if (num.val() === '') {
            num.val(1);
        }
        num.val(parseInt(num.val()) + 1);
    }
</script>


</body>